<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<style>


    /*放在顶部*/
    .order-head {
        position: absolute;
        top: 20px;
        width: 100%;
        padding-left: 25%;
    }

    .order-head div {
        display: inline-block;
        width: 25%;
    }

    /*被选中变为白色*/
    .checked {
        color: white !important;
        font-size: 15px;
    }

    .order-head div a {
        color: #d3dcd4;
        text-decoration: none;
    }

    .order-ul li {
        padding-top: 10px;
    }

    .order-page {
        height: 100%;
        width: 100%;
        clear: both;
        display: none;
    }


</style>

<body>


<!--主背景-->
<div style="height: 100%;background-color: #ddd;width: 100%">


    <!--容器-->
    <div>

        <!--顶部导航栏-->
        <div class="order-head">

            <div>
                <a href="#non_payment_orders">
                    待付款
                </a>
            </div>

            <!--进入订单模块时的首页-->
            <div>
                <a href="#payed_orders" class="checked">
                    已付款
                </a>
            </div>

            <div>
                <a href="#evaluate_orders">
                    待评价
                </a>
            </div>

        </div>


        <div class="order-page_container">


            <!--未付款订单页面-->
            <div id="non_payment_orders" class="order-page">
            </div>

            <!--已完成付款的订单页面-->
            <div id="payed_orders" class="order-page">
            </div>


            <!--等待评价页面-->
            <div id="evaluate_orders" class="order-page">
            </div>

        </div>
    </div>
</div>


<script>

    let cp = '#payed_orders';
    loadpage(cp, 'html/order/payed_orders.html');
    $(cp).show();

    $('.order-head div a').click(function (e) {
        e.preventDefault();
        //样式更改
        $('.order-head div a').removeClass('checked');
        let the = $(this);
        the.addClass('checked');
        let id = the.attr('href');
        //返回事件放入返回事件栈
        Backs.push(function () {
            if (id !== cp) {
                if (!hasLoad[id]) {
                    let path = 'html/order/' + id.substr(1) + '.html';
                    loadpage(id, path);
                }
                $('.order-page').hide();
                $(id).show();

                //广播页面切换事件
                Event.display(id);

                cp = id;
            }
        });
    });

    Event.display(cp);

    Event.onDisplay('#order', function () {
        Event.display(cp);
    });

</script>

</body>

</html>